<template>
  <el-form
    size="medium"
    label-position="left"
    :rules="rules"
    :model="model"
    ref="form"
    class="from"
  >
    <!-- 每个el-col留1个偏移量 -->
    <el-col
      :span="item.span || 11"
      v-for="(item, index) in itemList"
      :key="index"
      :offset="1"
    >
      <el-form-item
        :label-width="item.labelWidth"
        :prop="item.prop"
        :label="item.label"
      >
        <el-input
          v-if="item.type === 'text'"
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :type="item.type"
          :disabled="item.disabled"
          @focus="defaultFn(item.focus)"
          :suffix-icon="item.icon || ''"
          @click.native="defaultFn(item.click)"
          :id="item.id"
        ></el-input>

        <el-input
          v-if="item.type === 'number'"
          v-model.number="model[item.prop]"
          :placeholder="item.placeholder"
          :type="'text'"
          :disabled="item.disabled"
          @focus="defaultFn(item.focus)"
          :suffix-icon="item.icon || ''"
          @click.native="defaultFn(item.click)"
        ></el-input>
        <el-select
          v-else-if="item.type === 'select'"
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :disabled="item.disabled || false"
          :filterable="item.filterable"
        >
          <el-option
            v-for="(item, index) in item.options"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 级联选择器 -->
        <el-cascader
          v-else-if="item.type === 'cascader'"
          v-model="model[item.prop]"
          :options="item.options"
          :disabled="item.disabled || false"
          :props="item.props"
          :show-all-levels="item.showAllLevels"
        ></el-cascader>
        <el-date-picker
          v-else-if="item.type === 'date'"
          type="date"
          placeholder="选择日期"
          v-model="model[item.prop]"
          value-format="yyyy-MM-dd"
          :disabled="item.disabled || false"
        ></el-date-picker>
        <el-date-picker
          v-else-if="item.type === 'datetime'"
          type="datetime"
          placeholder="选择日期"
          v-model="model[item.prop]"
          value-format="yyyy-MM-dd HH:mm:ss"
          :disabled="item.disabled || false"
        ></el-date-picker>
        <el-input
          type="textarea"
          v-else-if="item.type === 'textarea'"
          v-model="model[item.prop]"
          :disabled="item.disabled || false"
          :maxlength="200"
        ></el-input>
        <el-radio-group
          v-else-if="item.type === 'radio'"
          v-model="model[item.prop]"
          :disabled="item.disabled || false"
        >
          <el-radio
            v-for="(item, key) in item.radioList"
            :key="key"
            :label="item.label"
            >{{ item.sex }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-col>
  </el-form>
</template>
<script>
import "@/assets/less/component/form.less";
export default {
  props: {
    labelWidth: {
      type: String,
      default: "",
    },
    model: {
      type: Object,
      default() {
        return {};
      },
    },
    rules: {
      type: Object,
      default() {
        return {};
      },
    },
    itemList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    defaultFn(fn) {
      if (fn) {
        fn();
        return;
      }
      return;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("handleSave", valid);
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>
